<template>
  <div id="app">
    <div class="common-layout">
      <el-container class="container">
        <el-header class="header">
          <HeaderBar></HeaderBar>
        </el-header>
        <el-container class="container">
          <el-aside class="aside">
            <SideBar />
          </el-aside>
          <el-main>
            <MainContent />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
import SideBar from "@/components/layout/SideBar.vue";
import HeaderBar from "@/components/layout/HeaderBar.vue";
import MainContent from "@/components/layout/MainContent.vue";
export default {
  name: "App",
  components: {
    MainContent,
    HeaderBar,
    SideBar,
  }
}
</script>
<style lang="less">
.size {
  width: 100%;
  height: 100%;
}
html,body{
  .size;
  margin: 0;
  padding: 0;
}

#app {
  .size;
  margin: 0;
  padding: 0;
  text-align: center;
}
.container{
  height: 100%;
}
.common-layout {
  height: 100%;
}
.header{
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
}
.aside{
  height: 100%  !important;
  width: 150px !important;
}
</style>
